<template>
	<view class="container">
		<TopBtn :title="'银行卡'"></TopBtn>
		<view class="info">
			<view class="card mb_25" v-for="n in list" :key="n.id">
				<view class="cardTop">
					<image src="@/static/my/logo.png" mode=""></image>
					<view class="name">
						{{n.openingBank}}
						<view class="">
							储蓄卡
						</view>
					</view>
					<view class="type">
						正常
					</view>
				</view>
				<view class="cardBtm">
					<view class="">
						{{n.bankAccountMasking}}
					</view>
					<view class="btn" @click="del(n.id)">
						解除绑定
					</view>
				</view>
			</view>
		</view>
		<view class="addBtn" @click="add()">
			添加银行卡
		</view>
		<view class="kong">

		</view>
	</view>
</template>

<script>
	import {
		getDoctorBankPage,
		deleteDoctorBank
	} from '@/api/user'
	export default {
		data() {
			return {
				list: [],
				request: {
					pageNo: 1,
					pageSize: 10,
				},
				maxNum: "",
				type: "",
				actList: ""
			};
		},
		onShow() {
			let that = this
			uni.$on('show', function(data) {
				if (data) {
					that.request.pageNo = 1
					that.list = []
					that.getDoctorBankPage(data)
				}
			})
		},
		onLoad() {
			this.getDoctorBankPage()
		},
		onReachBottom() {
			if (this.maxNum <= this.request.pageNo) return
			this.request.pageNo = this.request.pageNo + 1
			this.getDoctorBankPage()
		},
		methods: {
			add() {
				uni.navigateTo({
					url: `/pages/my/addBank/addBank`,
				})
			},
			del(id) {
				var _this = this
				uni.showModal({
					title: '提示',
					content: '是否确认删除',
					success: function(res) {
						if (res.confirm) {
							deleteDoctorBank(id).then(res => {
								_this.request.pageNo = 1
								_this.list = []
								_this.getDoctorBankPage()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}

					},
				})
			},
			getDoctorBankPage() {
				getDoctorBankPage(this.request).then(res => {
					this.list.push(...res.data.list)
					let num = res.data.total / this.request.pageSize
					if (num.toString().includes('.')) {
						num = Math.ceil(num)
					}
					this.maxNum = num
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		.kong {
			height: 200rpx;
		}

		.addBtn {
			width: 649rpx;
			height: 100rpx;
			background: #3B6CFE;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 100rpx;
			position: fixed;
			bottom: 99rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.info {
			padding: 30rpx;

			.card {
				width: 690rpx;
				height: 183rpx;
				background-image: url(@/static/my/bankbg.png);
				background-size: 100% 100%;
				border-radius: 10rpx;
				padding: 26rpx 20rpx;
				box-sizing: border-box;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;

				.cardBtm {
					padding-left: 82rpx;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					.btn {
						width: 163rpx;
						height: 60rpx;
						border-radius: 30rpx;
						border: 2rpx solid #FFFFFF;
						text-align: center;
						line-height: 60rpx;
						font-size: 24rpx;
						font-weight: 500;
					}
				}

				.cardTop {
					display: flex;
					justify-content: space-between;

					image {
						width: 66rpx;
						height: 66rpx;
						margin-right: 16rpx;
					}

					.name {
						flex: 1;

						view {
							font-weight: 500;
							font-size: 22rpx;
						}
					}

					.type {
						width: 77rpx;
						height: 36rpx;
						background: rgba(255, 255, 255, 0.2);
						border-radius: 18rpx;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 36rpx;
					}
				}
			}
		}
	}
</style>